<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-form ref="filterForm" :inline="true" :model="listQuery" class="filter-container">
          <el-form-item label="选择年月" prop="date">
            <el-date-picker
              v-model="listQuery.date"
              size="small"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择年月"
              :picker-options="pickerOptions"
              @change="handleFilter"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >查询</el-button>
            <el-button
              icon="el-icon-download"
              size="small"
              :loading="exportLoading"
              :disabled="exportLoading"
              @click="exportDailyData"
            >报表导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="statistics-panel-group">
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-wechat">
            <svg-icon icon-class="wechat" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">关注总人数</div>
            <count-to :start-val="0" :end-val="attentionNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-peoples">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">注册医生数</div>
            <count-to :start-val="0" :end-val="registerNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-proportion">
            <svg-icon icon-class="proportion" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">医生占比</div>
            <count-to :start-val="0" :end-val="doctorRatio" :duration="3000" class="card-panel-num" />
            %
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-register">
            <svg-icon icon-class="register" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增注册</div>
            <count-to :start-val="0" :end-val="monthlyRegNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-doctor">
            <svg-icon icon-class="doctor" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增注册医生</div>
            <count-to :start-val="0" :end-val="doctorNewNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-proportion">
            <svg-icon icon-class="proportion" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增医生占比</div>
            <count-to :start-val="0" :end-val="doctorNewlyRatio" :duration="3000" class="card-panel-num" />
            %
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="card-header clearfix">
            <h5 class="title pull-left">用户日报表</h5>
          </div>
          <div
            v-if="showEmptyWrapper"
            class="card-wrapper"
          >
            <div class="text-warning text-center">暂无数据</div>
          </div>
          <daily-chart
            v-else
            :chart-data="dailyStatistics"
            :height="'800px'"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getDailyStatistics,
  exportDailyStatistics
} from '@/api/statistics'
import CountTo from 'vue-count-to'
import DailyChart from './components/DailyChart'
import { blobExport } from '@/utils'

export default {
  name: 'DailyStatistics',
  components: {
    CountTo,
    DailyChart
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      listQuery: {
        date: this.$moment().format('YYYY-MM')
      },
      attentionNum: 0,
      doctorNewNum: 0,
      monthlyRegNum: 0,
      registerNum: 0,
      doctorNewlyRatio: 0,
      doctorRatio: 0,
      dailyStatistics: {},
      showEmptyWrapper: false,
      exportLoading: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getDailyStatistics(this.listQuery).then(response => {
        // console.log(response)
        const { data } = response
        if (this._.isEmpty(data.list)) {
          this.showEmptyWrapper = true
        } else {
          const statisticsData = {
            day: this._.map(data.list, 'day'),
            accumulated: this._.map(data.list, 'accumulated'),
            approve: this._.map(data.list, 'approve'),
            newDoctor: this._.map(data.list, 'newDoctor'),
            unfollow: this._.map(data.list, 'unfollow')
          }
          this.attentionNum = data.attentionNum
          this.doctorNewNum = data.doctorNewlyRegister
          this.monthlyRegNum = data.monthRegister
          this.registerNum = data.registerNum
          this.doctorNewlyRatio = parseFloat(data.doctorNewlyRatio) * 100
          this.doctorRatio = parseFloat(data.doctorRatio) * 100
          this.dailyStatistics = statisticsData
          this.showEmptyWrapper = false
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.fetchData()
    },
    exportDailyData() {
      if (this._.isEmpty(this.listQuery.date)) {
        this.$message({
          type: 'warning',
          message: '请选择年月！'
        })
      } else {
        this.exportLoading = true
        exportDailyStatistics(
          this.listQuery
        ).then(response => {
          // console.log(response)
          blobExport(response, `用户日报表 ${this.listQuery.date}.xlsx`)
          this.$message({
            type: 'success',
            message: '导出成功！',
            duration: 5000
          })
          this.exportLoading = false
        }).catch(err => {
          console.log(err)
          this.exportLoading = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px;
}
</style>
